/**
 * Created by bdbs on 2017/6/20.
 */
import React, { Component } from 'react';
import axios from 'axios';
import qs from 'qs';
import $ from 'jquery';
import DropFile from './components/DropFile';
import style from './style.scss';
import readFile from './util/readFile';
import parseSubtitle from './util/parseSubtitle';
import TimerMixin from 'react-timer-mixin';
import SubTitle from './components/SubTitle';
import Media from './components/Media';
import Dictionary from './components/Dictionary';
import { connect } from 'react-redux';
// import { session } from 'electron';
const {session} = require('electron');
import { host } from './config';
import { getUserInfo, logout } from './actions/userAction';

const encodeTypes = [
  'GBK',
  'utf8',
  'ucs2',
  'GB2312',
  'ascii',
  'binary',
  'base64',
  'hex',
];

class App extends Component {
  // 构造
  constructor(props) {
    super(props);
    this.mixins = [TimerMixin];
    // 初始状态
    this.state = {
      images: [],
      media: null,
      // video: {
      //   path: '/Users/new/Downloads/mdjsj.MP4',
      // },
      // audio: null,
      // subtitle: [],
      subtitle: [{"time":5,"subtitle":"[Music]  sounds fast I ordered these yesterday  [Music]  yesterday November 11th was a big day  here in China known as singles day 11:11 "},{"time":330,"subtitle":"get it  it's China's version of Cyber Monday but  its revenue is huge  last year the record was 17 point eight "},{"time":410,"subtitle":"billion dollars spent in one day 24  hours that's insane  to give you an idea how big of a number  that is take this 76 countries with the "},{"time":510,"subtitle":"smallest economies their annual GDP  doesn't even come close to the money  made the money spent in one day here in "},{"time":580,"subtitle":"China or let's talk about a bigger  country Brazil their annual ecommerce  sales doesn't even come close to the one "},{"time":645,"subtitle":"day here in China on singles day that's  just mind-blowing and to top it all off  this year is predicted to crush this "},{"time":710,"subtitle":"number so make sure to stay tuned to the  end of this video and I will reveal  those numbers this day started with "},{"time":760,"subtitle":"University students kind of just making  fun of the fact that they were single  and had no boyfriends and that's what "},{"time":815,"subtitle":"sparked this whole Singles Day holiday  and that's why it's on November 11th "}],
      time: 0,
      duration: 0,
    };
    this.encode = encodeTypes[0];
    this.offsetTime = 0;
    // this.getLocalSubtitle({
    //   lastModified: 1498182742000,
    //   lastModifiedDate: 'Fri Jun 23 2017 09:52:22 GMT+0800 (CST)',
    //   name:"48.lrc",
    //   path:"/Users/new/Downloads/48.lrc",
    //   preview:"blob:http://localhost:8003/dc51db42-cded-404f-bab9-8c8ff070771c",
    //   size:2878,
    //   type:"",
    //   webkitRelativePath:"",
    // });
  }

  componentDidMount() {
    const userInfo = this.props.getUserInfo();
    console.log('getUserInfo', userInfo);
  }

  handleTick(time) {
    this.setState({
      time,
    });
  }

  componentWillUnMount() {
    clearInterval(this.timmer);
  }

  handleEncodeChange() {
    console.log('this.refs.encodeSelect.value', this.refs.encodeSelect.value);
    this.encode = this.refs.encodeSelect.value;
    this.readEncodeFile();
  }

  handleSeek(time) {
    console.log('sdhfosdhfosdhjf', this.refs.media, time);
    this.refs.media.handleMediaSeekTo(time);
  }

  handleDrop(files) {
    console.log(files);
    this.setState({
      ...this.state,
      ...files,
    })
  }

  render() {
    return (
      <DropFile onDrop={this.handleDrop.bind(this)}>
        <div>
          <label>
            <span>选择编码</span>
            <select
              ref="encodeSelect"
              value={this.encode}
              onChange={this.handleEncodeChange.bind(this)}>
              { encodeTypes.map((encode, index) => <option key={index} value={encode}>{encode}</option>) }
            </select>
          </label>
          <span>
            <a onClick={this.props.logout}>logout</a>
          </span>
        </div>
        <div className={ style.main }>
          <div className={ style.mainMedia }>
            <Media
              ref="media"
              mediaFile={this.state.media}
              onTick={this.handleTick.bind(this)}
            />
          </div>
          <div className={ style.mainSubtitle }>
            <SubTitle
              time={this.state.time}
              subtitle={this.state.subtitle}
              onCentenceClick={this.handleSeek.bind(this)}
            />
          </div>
        </div>
      </DropFile>
    );
  }
}

export default connect(null, { getUserInfo, logout })(App);
